<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">

      <el-form-item label="违纪日期">
        <el-date-picker
          v-model="queryParams.dvDates"
          type="daterange"
          range-separator="至"
          value-format="yyyy-MM-dd"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="违纪学生">
        <el-input v-model="queryParams.studentName" clearable></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-button
          type="primary"
          icon="el-icon-upload2"
          size="mini"
          @click="handleExport">导出违纪</el-button>
    </el-row>


    <el-table v-loading="loading" :data="AttenceStaList" @selection-change="handleSelectionChange">
      <el-table-column label="违纪日期" align="center" prop="createTime" :show-overflow-tooltip="true" />
      <el-table-column label="违纪学生" align="center" prop="studentName" :show-overflow-tooltip="true" />
      <el-table-column label="班级" align="center" prop="className" :show-overflow-tooltip="true" />
      <el-table-column label="违纪区域" align="center" prop="dvArea" :show-overflow-tooltip="true" >
          <template slot-scope="scope">
              {{getArea(scope.row)}}
          </template>
      </el-table-column>
      <el-table-column label="违纪类型" align="center" prop="dvType" :show-overflow-tooltip="true" >
          <template slot-scope="scope">
              {{getDvType(scope.row)}}
          </template>
      </el-table-column>
      <el-table-column label="备注" align="center" prop="dvDesc" :show-overflow-tooltip="true" />
      <el-table-column label="违纪登记人" align="center" prop="createBy" :show-overflow-tooltip="true" />
      <el-table-column label="处罚图片" align="center" prop="fileImg" :show-overflow-tooltip="true" >
        <template slot-scope="scope">
          <el-image 
            v-if="scope.row.fileImg"
            style="width: 50px; height: 40px"
            :src="getImgPath(scope.row.fileImg)"
            :preview-src-list="[getImgPath(scope.row.fileImg)]">
          </el-image>
        </template>
      </el-table-column>
      <el-table-column label="处罚状态" align="center" prop="punishStatus" :show-overflow-tooltip="true" >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.punishStatus==1" type="success">已处理</el-tag>
          <el-tag v-if="scope.row.punishStatus==0" type="warning">未处理</el-tag>
        </template>
      </el-table-column>

    </el-table>


    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />


    <!-- <bargraph :id="'bargraph'" :data="option2" style="height:350px;margin-top: 30px;"  ></bargraph> -->


  </div>
</template>



<script>
  // import bargraph from '../../dashboard/AttendanceChart'
  import { getPageList,exportDvData } from "@/api/school/dvinfo";
  export default {
    name: "dvinfo",
    data(){
      return{
        serviceEnvPath:process.env.VUE_APP_BASE_API,
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 总条数
        total: 0,
        AttenceStaList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          accessDate: undefined
        },
        dvAreaList:[
            {"1":"班级"},
            {"2":"宿舍"},
            {"3":"校园内"}
        ],
        dvtypeList:[
            {"1":"着装"},
            {"2":"睡觉"},
            {"3":"玩游戏"},
            {"4":"外出"},
            {"5":"抽烟"},
            {"6":"其他"},
            {"7":"迟到"},
            {"8":"未戴校牌"},
            {"9":"未穿校服"},
            {"10":"携带外卖"},
            {"11":"校园抽烟"},
            {"12":"打架斗殴"},
            {"13":"饮酒酗酒"},
            {"14":"打牌赌博"},
            {"15":"翻爬围墙"},
            {"16":"谩骂他人"},
            {"17":"携带违禁品"},
            {"18":"宿舍抽烟"},
        ]
        
      }
    },
    components:{
      // bargraph
    },
    created() {
      this.getList();
    },
    methods: {
        getArea(row){
            const val = row.dvArea;
            for(let i=0;i<this.dvAreaList.length;i++){
                for(var key in this.dvAreaList[i]){
                    if(key==val){
                        return this.dvAreaList[i][key]
                    }
                }
            }
            
        },
        getDvType(row){
            const val = row.dvType;
            for(let i=0;i<this.dvtypeList.length;i++){
                for(var key in this.dvtypeList[i]){
                    if(key==val){
                        return this.dvtypeList[i][key]
                    }
                }
            }
        },
      /** 查询任务量列表 */
      getList() {
        this.loading = true;
        getPageList(this.queryParams).then(response => {
            this.AttenceStaList = response.data.list;
            this.total = response.data.total;
            this.loading = false;
          let xAxisData = [];
          let seriesData = [];
          for (let i = 0; i < response.data.list.length; i++) {
            let dormitory = response.data.list[i].buildingNo+"-"+response.data.list[i].storey+"-"+response.data.list[i].dormitoryNo;
            let attendanceRate = response.data.list[i].normalAttenceRate;
            xAxisData.push(dormitory);
            seriesData.push(parseInt(attendanceRate));
          }
          this.option2.xAxis.data = xAxisData;
          this.option2.series[0].data = seriesData;
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.dateRange = [];
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.single = selection.length!==1
        this.multiple = !selection.length
      },
      /** 导出按钮操作 */
      handleExport() {
        const queryParams = this.queryParams;
        this.$confirm('是否确认导出所有宿舍考勤统计数据项?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function() {
            return exportAttenceSta(queryParams);
          }).then(response => {
            this.fileDownload(response.data, "宿舍考勤统计管理.xlsx");
          }).catch(function() {});
      },
      getImgPath(filename){
        let path = window.location.host
        if(path.indexOf("49")>=0){
          path = 'http://49.4.65.194:9092/app/common/downloadFileImg?filename='+filename
        } else if(path.indexOf("117")>=0){
          path = 'http://117.78.19.207:9091/app/common/downloadFileImg?filename='+filename
        } else{
          path = 'http://localhost:9091/app/common/downloadFileImg?filename='+filename
        }
        console.log(path)
        return path
      },
      handleExport() {
        let params={}
        debugger
        if(this.queryParams.dvDates){
          params={
            beginDate:this.queryParams.dvDates[0],
            endDate:this.queryParams.dvDates[1]
          }
        }
        
        console.log(params)
        this.$confirm('是否确认导出违纪数据项?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function() {
            
            return exportDvData(params);
          }).then(response => {
            this.fileDownload(response.data, "值班记录.xlsx");
          }).catch(function() {});
      },
    }
  }
</script>
